<template>
  <div class="content">
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      :row-style="rowStyle"
    >
      <el-table-column
        prop="devicename"
        label="监测站点"
        min-width="40%"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="asa"
        label="实时负（氧）离子浓度(个/cm³)"
        min-width="30%"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="updatedate"
        label="日期"
        min-width="30%"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="degree"
        label="清新程度"
        min-width="20%"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reqNegToken } from "@/api/pc-index";
import axios from "axios";
import Cookies from 'js-cookie';

export default {
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.getNegToken();
  },
  methods: {
    async getNegToken() {
      if (!localStorage.getItem("indexToken")) {
        const res = await reqNegToken("yaanshi");
        sessionStorage.setItem("indexToken", res.data.token);
        axios({
          method: "get",
          url: "http://api.epext.com/api/v2.0/Devices/GetDevicelist?page=1&size=10&devicetype=ynai&sortfield=observetime2&sorttype=desc",
          headers: {
            Authorization: "Bearer " + sessionStorage.getItem("indexToken"),
          },
        }).then((res) => {
          const data = JSON.parse(res.data.data);
          //console.log(data);
          data.filter((item) => {
            let { asa, devicename, updatedate } = item;
            if (asa > 10000 || asa < 100) {
              asa = "-";
            }
            updatedate = this.formatDateToHourString(updatedate);
            let degree = "";
            if (item.asa >= 1200) {
              degree = "空气清新";
            }
            if (1200 > item.asa >= 500) {
              degree = "空气较清新";
            }
            if (500 > item.asa >= 100) {
              degree = "空气一般";
            }
            if (100 > item.asa > 0) {
              degree = "空气不够清新";
            }
            this.tableData.push({ asa, devicename, updatedate, degree });
          });
          //console.log(this.tableData)
        });
      } else {
        axios({
          method: "get",
          url: "http://api.epext.com/api/v2.0/Devices/GetDevicelist?page=1&size=10&devicetype=ynai&sortfield=observetime2&sorttype=desc",
          headers: {
            Authorization: "Bearer " + sessionStorage.getItem("indexToken"),
          },
        }).then((res) => {
          const data = JSON.parse(res.data.data);
          data.filter((item) => {
            let { asa, devicename, updatedate } = item;
            if (asa > 10000 || asa < 100) {
              asa = "-";
            }
            updatedate = this.formatDateToHourString(updatedate);
            let degree = "";
            if (item.asa >= 1200) {
              degree = "空气清新";
            }
            if (1200 > item.asa >= 500) {
              degree = "空气较清新";
            }
            if (500 > item.asa >= 100) {
              degree = "空气一般";
            }
            if (100 > item.asa > 0) {
              degree = "空气不够清新";
            }
            this.tableData.push({ asa, devicename, updatedate, degree });
          });
          // console.log(this.tableData)
        });
      }
    },
    formatDateToHourString(dateString) {
      const datePart = dateString.split("T")[0];
      const hourPart = dateString.split("T")[1].split(":")[0] + "时";
      return datePart + " " + hourPart;
    },
    headerCellStyle() {
      return {
        background: "#011A10",
        color: "#fff",
        opacity: 0.8,
      };
    },
    cellStyle() {
      return {
        background: "#00371D",
        color: "#fff",
      };
    },
    rowStyle() {
      return {
        height: "30px",
      };
    },
  },
};
</script>

<style scoped>
.content {
  width: 100%;
}
</style>